<template>
  <div class="white-box">
    <div class="table-mb">
      <el-button type="primary" @click="handleAdd()" :icon="CirclePlus">添加菜单</el-button>
    </div>

    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }"
              element-loading-background="rgba(255, 255, 255, 0.6)" row-key="sid" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="menuName" label="菜单名称" min-width="140"> </el-table-column>
      <el-table-column align="center" prop="icon" label="图标" width="100">
        <template #default="{ row }">
          <el-icon>
            <component v-if="row.icon" :is='row.icon' />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="菜单类型" width="100">
        <template #default="{ row }">
          <el-tag type="primary" v-if="row.type === 0">目录</el-tag>
          <el-tag type="success" v-else-if="row.type === 10">菜单</el-tag>
          <el-tag type="warning" v-else-if="row.type === 20">按钮</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由地址" min-width="120"></el-table-column>
      <el-table-column prop="component" label="组件路径" min-width="120"></el-table-column>
      <el-table-column prop="permission" label="权限标识" min-width="120"></el-table-column>
      <el-table-column prop="viewSort" label="排序" width="60"> </el-table-column>
      <el-table-column align="center" prop="visible" label="显示/隐藏"  width="100">
        <template #default="{ row }">
          <el-text v-if="row.visible === 0" type="success">显示</el-text>
          <el-text v-else-if="row.visible === 1" type="info">隐藏</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态"  width="100">
        <template #default="{ row }">
          <el-text v-if="row.status === 0" type="success">正常</el-text>
          <el-text v-else-if="row.status === 1" type="info">停用</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleAdd({parentTreeCode:row.treeCode},row)">添加子项</el-button>
          <el-button link type="primary" @click="handleEdit(row,{sid:row.sid})">编辑</el-button>
          <el-popconfirm :persistent="false" title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                         @confirm="handleDelete(row.sid,getTreeSelect)">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogShow" :title="dialogParams.type == 'add'?'添加':'编辑'" width="660px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialog">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px" style="width: 560px">
        <el-form-item label="上级菜单" prop="type" v-if="dialogParams.data.parentTreeCode">
          <el-text>{{dialogParams.row.menuName}}</el-text>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName" required>
          <el-input v-model.trim="dialogForm.menuName" clearable placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="类型" prop="type" required>
          <el-radio-group v-model="dialogForm.type">
            <el-radio :value="0">目录</el-radio>
            <el-radio :value="10">菜单</el-radio>
            <el-radio :value="20">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model.trim="dialogForm.component" clearable placeholder="请输入组件路径"/>
        </el-form-item>
        <el-form-item label="路由地址" prop="path">
          <el-input v-model.trim="dialogForm.path" clearable placeholder="请输入路由地址"/>
        </el-form-item>
        <el-form-item label="路由参数" prop="query">
          <el-input v-model.trim="dialogForm.query" clearable placeholder="请输入路由参数"/>
        </el-form-item>
        <el-form-item label="权限标识" prop="permission">
          <el-input v-model.trim="dialogForm.permission" clearable placeholder="请输入权限标识"/>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-select v-model="dialogForm.icon" placeholder="请选择图标" clearable>
            <el-option
                v-for="item in iconList"
                :key="item"
                :label="item"
                :value="item"
            >
              <div style="display: flex;align-content: center;align-items: baseline">
                <el-icon>
                  <component v-if="item" :is='item' />
                </el-icon>
                <span style="margin-left: 10px">{{ item }}</span>
              </div>
            </el-option>
            <template #label="{ label, value }">
              <div style="display: flex;align-items: center">
                <el-icon>
                  <component v-if="value" :is='value' />
                </el-icon>
                <span style="margin-left: 10px">{{ value }}</span>
              </div>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model.trim="dialogForm.note" clearable placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item label="是否显示" prop="visible">
          <el-radio-group v-model="dialogForm.visible">
            <el-radio :value="0">显示</el-radio>
            <el-radio :value="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="删除" prop="deletable">
          <el-radio-group v-model="dialogForm.deletable">
            <el-radio :value="0">可以</el-radio>
            <el-radio :value="1">不可以</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="外链" prop="isFrame">
          <el-radio-group v-model="dialogForm.isFrame">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dialogForm.status">
            <el-radio :value="0">正常</el-radio>
            <el-radio :value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="viewSort">
          <el-input v-model.number="dialogForm.viewSort" clearable placeholder="请输入排序" oninput="value=value.replace(/[^\d]/g,'')" style="width: 30%"/>
          <el-text type="danger" style="margin-left: 5px">格式：数字，小的在前显示</el-text>
        </el-form-item>
        <el-form-item>
          <div class="flexs">
            <el-button type="primary" :loading="dialogParams.loading" @click="submitDialogForm(dialogFormRef,false,getTreeSelect)">
              确认
            </el-button>
            <el-button @click="resetDialogForm(dialogFormRef)">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
const iconList = Object.keys(ElementPlusIconsVue);

const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete
} = listMixins()

dialogForm.component = "";//组件路径
dialogForm.deletable = 0;//是否可删除：0=可以删除，1=不可以删除，默认0
dialogForm.icon = "";//菜单图标
dialogForm.isFrame = 1;//是否为外链：0=是 1=否；默认1
dialogForm.menuName	= "";//菜单名称
dialogForm.note	= "";//备注，最多100字符
// dialogForm.parentTreeCode	= "";//父级树编码
dialogForm.path	= "";//路由地址
dialogForm.permission	= "";//权限标识
dialogForm.query	= "";//路由参数
dialogForm.status	= 0;//状态：0=正常, 1=停用；默认0
dialogForm.type	= 0;//菜单类型：0=目录，10=菜单，20=按钮
dialogForm.viewSort	= 0;//显示顺序
dialogForm.visible = 0;//是否显示菜单：0=显示，1=隐藏；默认0

apiPath.value = '/menus';

onMounted(() => {
  // getData()
  getTreeSelect();
})
const getTreeSelect = async () => {
  loading.value = true;
  await proxy.$axios
      .get('/menus/treeSelect')
      .then((res) => {
        // console.log(res);
        switch (res.data.code) {
          case 200:
            let resData = res.data.data
            list.value = resData
            break
          default:
            proxy.$message({message: res.data.msg, type: "error"})
            break
        }
        loading.value = false;
      })
      .catch((error) => {
        loading.value = false;
      })
}

const path_validator = (rule, value, callback) =>{
  if(!value && dialogForm.type != 20){
    callback(new Error("请输入路由地址"))
  }else{
    callback()
  }
}
const icon_validator = (rule, value, callback) =>{
  if(!value && !dialogParams.data.parentTreeCode){
    callback(new Error("请选择图标"))
  }else{
    callback()
  }
}
// watch(()=>dialogForm.type,newValue => {
//   dialogFormRef.value.validateField(`path`);
// });
const dialogFormRules = reactive({
  menuName:[{
    required: true,
    message: "请输入菜单名称",
    trigger: "blur"
  }],
  // path: [{
  //   validator:path_validator,
  //   // required: true,
  //   // message: "请输入菜单路径",
  //   trigger: "blur"
  // }],
  // icon:[{
  //   validator:icon_validator,
  //   trigger: "blur"
  // }],
  viewSort:[{
    required: true,
    message: "请输入排序",
    trigger: "blur"
  }],
})
</script>

<style lang="less">

</style>